<template>
  <div id="app">

    <!--1578 1987-->
    <el-col :span="8" style="margin: 0 auto;">
      <!--卡片功能-->
      <el-tabs type="border-card" shadow="hover"
               style="width: 824px;height: 463px;position: fixed;top: 50%;left: 50%;margin-left: -412px;margin-top: -211px;border-radius: 20px">
        <!--关闭功能-->
        <i class="el-icon-close" style="overflow: hidden;position: relative;left: 750px;font-size: 30px" @click="$router.push('/')"></i>

        <div style="overflow: hidden;position: relative;bottom: 20px">
          <!--扫码功能-->
          <div style="position: relative;left: 100px;top: 30px;font-size: 25px;overflow: hidden">扫码登录</div>

          <div id="c1"></div>
          <!--用户名和密码登录注册功能-->
          <div id="c2">

            <el-form style="width: 400px; margin: 50px auto;margin-right: 50px" label-width="60px" >
              <el-form-item label="用户名" prop="username">
                <el-input v-model="username" placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item label="密码"prop="password">
                <el-input v-model="password" type="password" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button style="border-radius: 12px; position: relative;right: -50px" type="primary" @click="loginList()">登录</el-button>

                <el-button  style="border-radius: 12px; position: relative;right: -100px;" type="primary" @click="$router.push('/sys-admin/product/reg')">注册</el-button>
                <!--qq微信手机图片-->
                <a href="" style="position: relative;top: 95px;left: 60px"><img src="../imgs/phonelogo-2.png" style="width: 35px"></a>
                <a href="" style="position: relative;top: 95px;left: -72px"><img src="../imgs/weixinlogo-2.png" style="width: 35px"></a>
                <a href="" style="position: relative;top: 95px;left: -210px"><img src="../imgs/qqlogo-1.png" style="width: 35px"></a>
              </el-form-item>
              <!--qq微信手机登录-->
              <a href="" style="color: dodgerblue;position: relative;top: 30px;left: 130px" @click="login">登录</a>
              <a href="" style="color: dodgerblue;position: relative;top: 30px;left: 190px">登录</a>
              <a href="" style="color: dodgerblue;position: relative;top: 30px;left: 250px">登录</a>
            </el-form>
          </div>
          <div style="width: 200px;position: relative;bottom: -80px;left: 70px;font-size: 14px">请使用御兽阁客户端扫码<br>登录或扫码下载App登录</div>
          <!--二维码功能-->
          <img src="../imgs/erweimalogo-2.png" style="width: 200px;position: relative;bottom: 188px;left: 50px">
        </div>
      </el-tabs>
    </el-col>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      user: {username: "", password: ""},
      username:'',
      password: ''
    }
  },
  methods: {
    loginList(){},
    login(){
      this.axios.post("/login",v.user).then(function (response) {
        if (response.data==1){
          alert("登录成功!")
        }else if (response.data==2){
          v.$message.error("密码错误!")
        }else {
          v.$message.error("用户名不存在!")
        }
      })
    }

  }
}
</script>

<style>
#c1 {
  width: 200px;
  height: 200px;
  background-color: green;
  position: relative;
  top: 50px;
  left: 50px;
  float: left;
}
#c2 {
  float: right;

}
#c3{
  position: relative;
  top: -60px;
  left: -80px;
}
</style>